<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch-监视路由地址改变</title>
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

        <router-view></router-view>
    </div>
    <script>

        //初始化组件
        var login = {
            template:"<h4>这里是登录界面，嘻嘻嘻</h4>"
        }

        var register = {
            template:"<h4>这里是注册界面，嘿嘿嘿</h4>"
        }

        //初始化路由
        var router = new VueRouter({
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register}

            ]
        });


        var vue = new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },
            //绑定路由和vue的关系
            router,
            watch:{
                //监听路由地址的改变
                '$route.path':function(newVal){
                    if(newVal == '/login'){
                        console.log("欢迎进入登录界面")
                    }else{
                        console.log("欢迎进入注册界面")
                    }

                }
            }

        });
    </script>
</body>
</html>